<template>
  <div class="container" >
    <div>
      被服务人名称：
      <el-input class="com-input"
        placeholder="请输入内容"
        v-model="serveRecheckParams.userName">
      </el-input>
      被服务人手机号：
      <el-input class="com-input"
        placeholder="请输入内容"
        v-model="serveRecheckParams.mobile">
      </el-input>
    </div> 
    <div style="margin-top: 10px;">
      修改人：
      <el-select v-model="serveRecheckParams.operatorId" placeholder="全部">
        <el-option
          v-for="item in users"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      状态：
      <el-select v-model="serveRecheckParams.status" placeholder="全部">
        <el-option
          v-for="item in checkStatus"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-search" class="btn" @click="search">查询</el-button>
    </div>
    
    <el-main>
      <el-table :data="serveInfoList">
        <el-table-column prop="id" label="ID">
        </el-table-column>
        <el-table-column prop="userName" label="被服务人姓名">
        </el-table-column>
        <el-table-column prop="mobile" label="被服务人手机号">
        </el-table-column>
        <el-table-column prop="operatorName" label="修改人">
        </el-table-column>
        <el-table-column prop="updateTimeValue" label="修改时间">
        </el-table-column>
        <el-table-column prop="reason" label="修改原因">
        </el-table-column>
        <el-table-column prop="operatorType" label="类型">
        </el-table-column>
        <el-table-column prop="status" label="状态">
        </el-table-column>
        <el-table-column label="操作" width='220'>
          <template slot-scope="scope">
            <el-button @click="checkDetail(scope.row)" type="text" size="small">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="demonstration-box">
        <!-- <span class="demonstration">显示总数</span> -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageParams.size"
          layout="total, prev, pager, next"
          :total="pageParams.totalCount"
        ></el-pagination>
      </div>
    </el-main>
  </div>
</template>

<script>
const queryString = require('querystring')
import page from 'data/page'
import { getUsers } from 'data/listBody'
import { checkStatus, serveRecheckParams } from 'data/recheck'
export default {
  name: 'serveList',
  mixins: [page],
  data() {
    return {
      checkStatus,
      serveRecheckParams,
      users:[],
      serveInfoList: []
    }
  },
  props: {
      status: {
        default: false,
        type: Boolean
      }
    },
    watch: {
      status(val) {
        if (val) this.search()
      }
    },
  created() {
    this.dataInit()
  },
  methods: {
    dataInit(){
      getUsers((res)=>{
        this.users = res;
      })
    },
    search() {
      this.serveRecheckParams.page = this.currentPage - 1
      this.axios.get('/order/tempList?' + queryString.stringify(this.serveRecheckParams)).then((res) => {
        const code = Number(res.data.code)
        if (code === 200) {
            this.serveInfoList = res.data.data.list
            this.serveInfoList.forEach((serveInfo, index) => {
              this.serveInfoList[index].updateTimeValue = this.timeFormater(serveInfo.updateTime).format('YYYY-MM-DD')
              this.serveInfoList[index].status = this.getStatusValue(serveInfo.status)
            })
            this.setPage(res.data.data)
            // if (this.serveInfoList.length === 0) this.$message(this.mes.noData)
        } else {
            this.$message(this.mes.busy)
        }
      }).catch((err) => {
        console.log(err)
        this.$message(this.mes.busy)
      })
    },
    checkDetail(item) {
      this.$router.push('serveInfo?id=' + item.id)
    },
    getStatusValue(val) {
      let value = ''
      val = String(val)
      switch (val) {
        case '-1': value = '待审核'; break;
        case '0': value = '已审核'; break;
        case '-2': value = '已拒绝'; break;
      }
      return value
    }
  }
}
</script>

<style lang="less" scoped>
@import url('../../../../assets/less/checklist.less');
</style>
